<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx 完全指南 - 高性能Web服务器解析</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-bg {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
        }
        .code-block {
            background-color: #282c34;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .code-block pre {
            overflow-x: auto;
            padding: 1.5rem;
            color: #abb2bf;
            font-family: 'Courier New', Courier, monospace;
            line-height: 1.5;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .floating-icon {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-bg text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Nginx 完全指南</h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90">高性能Web服务器架构解析与最佳实践</p>
                <p class="text-lg opacity-80 mb-10">探索Nginx如何通过事件驱动架构处理百万级并发连接，成为现代Web架构的核心组件。</p>
                <div class="flex space-x-4">
                    <a href="#introduction" class="bg-white text-blue-800 px-6 py-3 rounded-lg font-medium hover:bg-blue-100 transition duration-300">
                        <i class="fas fa-book-open mr-2"></i>开始阅读
                    </a>
                    <a href="#architecture" class="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-800 transition duration-300">
                        <i class="fas fa-project-diagram mr-2"></i>架构解析
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 relative">
                <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1720923644326-814f8671-b34a-4e96-8b15-df78634bbfe8.png" 
                     alt="Nginx Architecture" 
                     class="rounded-xl shadow-2xl floating-icon">
                <div class="absolute -bottom-6 -left-6 w-16 h-16 bg-yellow-400 rounded-full opacity-20"></div>
                <div class="absolute -top-6 -right-6 w-24 h-24 bg-blue-300 rounded-full opacity-20"></div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section id="introduction" class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row mb-12">
                <div class="md:w-1/2 md:pr-10 mb-8 md:mb-0">
                    <h2 class="text-3xl font-bold mb-6 text-gray-800">什么是Nginx</h2>
                    <p class="text-lg text-gray-700 mb-6">我们常常在项目中遇到需要处理高并发、低延迟和高可用性的场景。在这样的背景下，选择合适的Web服务器是至关重要的，而Nginx就是这样一个无可替代的工具。</p>
                    <p class="text-lg text-gray-700">Nginx起初由俄罗斯程序员Igor Sysoev在2004年发布，旨在解决传统Web服务器在处理高并发连接时的性能瓶颈。其设计理念基于事件驱动架构，使其能够高效地处理成千上万的并发连接，而不消耗大量的系统资源。如今，Nginx不仅仅是一个高性能的HTTP服务器，它还广泛应用于反向代理、负载均衡、邮件代理和API网关等多个领域。</p>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white p-6 rounded-xl shadow-md border border-gray-100">
                        <h3 class="text-xl font-semibold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-info-circle text-blue-500 mr-2"></i> Nginx简介
                        </h3>
                        <p class="text-gray-700 mb-4">Nginx（发音为"Engine X"）是一个高性能的HTTP和反向代理服务器，同时也是一个IMAP/POP3/SMTP代理服务器。</p>
                        <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
                            <h4 class="font-medium text-blue-800 mb-2">关键特性</h4>
                            <ul class="list-disc pl-5 space-y-1 text-gray-700">
                                <li>事件驱动架构，处理高并发连接</li>
                                <li>低内存消耗，高吞吐量</li>
                                <li>模块化设计，高度可扩展</li>
                                <li>支持反向代理和负载均衡</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid md:grid-cols-3 gap-6 mb-16">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 feature-card transition duration-300">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-history text-blue-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">起源与发展</h3>
                    <p class="text-gray-700">由Igor Sysoev在2002年开始开发，2004年发布，最初为了解决Rambler网站的高并发问题。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 feature-card transition duration-300">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-chart-line text-green-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">发展历程</h3>
                    <p class="text-gray-700">2011年成立Nginx公司，2019年被F5 Networks收购，成为企业级解决方案的核心组件。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 feature-card transition duration-300">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-tasks text-purple-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">主要用途</h3>
                    <p class="text-gray-700">Web服务器、反向代理、负载均衡、邮件代理、API网关等多功能应用。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Architecture Section -->
    <section id="architecture" class="py-16 bg-gray-50 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4 text-gray-800">Nginx架构解析</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">事件驱动与异步非阻塞I/O架构如何成就Nginx的高性能</p>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div>
                    <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1720923710680-9514fbbf-e1e7-40fd-8ea2-96574fe2f1a3.png" 
                         alt="Nginx Architecture Diagram" 
                         class="rounded-lg shadow-md w-full">
                </div>
                <div>
                    <div class="mb-8">
                        <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-project-diagram text-blue-500 mr-3"></i> 事件驱动模型
                        </h3>
                        <p class="text-gray-700 mb-4">Nginx采用了基于事件驱动的模型（Event-Driven Model）。这种模型不同于传统的多线程或多进程模型，能够更高效地利用系统资源。</p>
                        <p class="text-gray-700">通过epoll（在Linux系统上）、kqueue（在FreeBSD系统上）等系统调用来监听多个事件，Nginx能够在单线程内处理大量的并发请求，而不需要为每个请求创建新的线程或进程。</p>
                    </div>

                    <div class="mb-8">
                        <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-bolt text-yellow-500 mr-3"></i> 异步非阻塞I/O
                        </h3>
                        <p class="text-gray-700">Nginx的I/O操作是异步非阻塞的。这意味着当Nginx在处理I/O操作时，不会因为某个操作未完成而阻塞整个进程或线程。相反，Nginx会继续处理其他可用的事件，直到I/O操作完成后再处理结果。</p>
                    </div>
                </div>
            </div>

            <!-- Architecture Features -->
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                    <h3 class="text-xl font-semibold mb-3 text-gray-800 flex items-center">
                        <i class="fas fa-sitemap text-green-500 mr-2"></i> 多进程架构
                    </h3>
                    <p class="text-gray-700">Nginx启动时会生成一个主进程（master process）和多个工作进程（worker processes）。主进程负责管理工作进程的生命周期，工作进程处理实际请求，充分利用多核CPU优势。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                    <h3 class="text-xl font-semibold mb-3 text-gray-800 flex items-center">
                        <i class="fas fa-puzzle-piece text-purple-500 mr-2"></i> 模块化设计
                    </h3>
                    <p class="text-gray-700">Nginx的功能主要通过模块实现，包括HTTP核心模块、Rewrite模块、Proxy模块等。这种设计提供了高度灵活性和可扩展性，开发者可以根据需要加载或编写新模块。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                    <h3 class="text-xl font-semibold mb-3 text-gray-800 flex items-center">
                        <i class="fas fa-memory text-blue-500 mr-2"></i> 共享内存和缓存机制
                    </h3>
                    <p class="text-gray-700">Nginx利用共享内存机制在不同进程间共享数据，实现高效的缓存机制。可以缓存静态资源、反向代理请求结果等，大大提高响应速度和服务器吞吐量。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                    <h3 class="text-xl font-semibold mb-3 text-gray-800 flex items-center">
                        <i class="fas fa-shield-alt text-red-500 mr-2"></i> SSL/TLS支持
                    </h3>
                    <p class="text-gray-700">Nginx具备强大的SSL/TLS支持能力。通过配置SSL/TLS证书，可以为客户端提供安全的HTTPS连接，保护数据传输的机密性和完整性，并支持HTTP/2协议。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Configuration Section -->
    <section id="configuration" class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-gray-800">Nginx配置文件结构</h2>
            
            <div class="mb-16">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2 flex items-center">
                    <i class="fas fa-code text-blue-500 mr-3"></i> 基本结构解析
                </h3>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h4 class="text-xl font-medium mb-4 text-gray-700">1. 全局配置块</h4>
                        <div class="code-block">
                            <pre>user www-data;
worker_processes auto;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
}</pre>
                        </div>
                        <p class="text-gray-700 mt-4"><span class="font-medium">user</span> 定义Nginx进程运行的用户和用户组</p>
                        <p class="text-gray-700"><span class="font-medium">worker_processes</span> 设置工作进程数量</p>
                    </div>
                    
                    <div>
                        <h4 class="text-xl font-medium mb-4 text-gray-700">2. HTTP块配置</h4>
                        <div class="code-block">
                            <pre>http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                   '$status $body_bytes_sent "$http_referer" '
                   '"$http_user_agent" "$http_x_forwarded_for"';
    
    access_log /var/log/nginx/access.log main;
    sendfile on;
    keepalive_timeout 65;
}</pre>
                        </div>
                        <p class="text-gray-700 mt-4">包含MIME类型、日志格式、访问日志等全局HTTP设置</p>
                    </div>
                    
                    <div>
                        <h4 class="text-xl font-medium mb-4 text-gray-700">3. Server块配置</h4>
                        <div class="code-block">
                            <pre>server {
    listen 80;
    server_name example.com;
    
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }
    
    error_page 404 /404.html;
}</pre>
                        </div>
                        <p class="text-gray-700 mt-4">定义虚拟主机，包含监听端口、服务器名称和位置块</p>
                    </div>
                    
                    <div>
                        <h4 class="text-xl font-medium mb-4 text-gray-700">4. Location块配置</h4>
                        <div class="code-block">
                            <pre>location /images/ {
    root /data;
    expires 30d;
    add_header Cache-Control "public";
}

location ~ \.php$ {
    fastcgi_pass unix:/var/run/php-fpm.sock;
    include fastcgi_params;
}</pre>
                        </div>
                        <p class="text-gray-700 mt-4">匹配特定URI，应用不同的处理规则</p>
                    </div>
                </div>
            </div>
            
            <div>
                <h3 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2 flex items-center">
                    <i class="fas fa-cogs text-purple-500 mr-3"></i> 完整配置示例
                </h3>
                
                <div class="code-block mb-8">
                    <pre>user www-data;
worker_processes auto;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                   '$status $body_bytes_sent "$http_referer" '
                   '"$http_user_agent" "$http_x_forwarded_for"';
    
    access_log /var/log/nginx/access.log main;
    error_log /var/log/nginx/error.log warn;
    
    sendfile on;
    tcp_nopush on;
    keepalive_timeout 65;
    
    upstream backend {
        server backend1.example.com;
        server backend2.example.com;
    }
    
    server {
        listen 80;
        server_name example.com;
        
        location / {
            proxy_pass http://backend;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
        
        location /static/ {
            root /var/www/html;
            expires 30d;
        }
    }
}</pre>
                </div>
            </div>
        </div>
    </section>

    <!-- Reverse Proxy Section -->
    <section id="reverse-proxy" class="py-16 bg-gray-50 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row items-center mb-12">
                <div class="md:w-1/2 mb-8 md:mb-0">
                    <h2 class="text-3xl font-bold mb-4 text-gray-800">反向代理与负载均衡</h2>
                    <p class="text-lg text-gray-700 mb-6">反向代理是一种代理服务器配置，接收客户端请求并将其转发给内部网络中的一台或多台服务器，然后将服务器的响应返回给客户端。</p>
                    <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                        <h4 class="font-semibold text-blue-800 mb-2 flex items-center">
                            <i class="fas fa-lightbulb mr-2"></i> 核心价值
                        </h4>
                        <ul class="list-disc pl-5 text-gray-700">
                            <li>隐藏内部服务器结构，增强安全性</li>
                            <li>平衡多台服务器间的负载</li>
                            <li>提供缓存和压缩功能优化性能</li>
                            <li>支持SSL卸载减轻服务器负担</li>
                        </ul>
                    </div>
                </div>
                <div class="md:w-1/2 md:pl-10">
                    <div class="code-block">
                        <pre>server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

upstream backend {
    server backend1.example.com;
    server backend2.example.com;
}</pre>
                    </div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-random text-green-500 mr-3"></i> 负载均衡策略
                    </h3>
                    
                    <div class="space-y-4">
                        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                            <h4 class="font-medium text-gray-800 mb-2">轮询 (Round Robin)</h4>
                            <p class="text-gray-700">默认策略，请求按顺序依次分配给后端服务器。</p>
                            <div class="code-block mt-2">
                                <pre>upstream backend {
    server backend1.example.com;
    server backend2.example.com;
}</pre>
                            </div>
                        </div>
                        
                        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                            <h4 class="font-medium text-gray-800 mb-2">最少连接 (Least Connections)</h4>
                            <p class="text-gray-700">将请求分配给当前连接数最少的服务器。</p>
                            <div class="code-block mt-2">
                                <pre>upstream backend {
    least_conn;
    server backend1.example.com;
    server backend2.example.com;
}</pre>
                            </div>
                        </div>
                        
                        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
                            <h4 class="font-medium text-gray-800 mb-2">IP哈希 (IP Hash)</h4>
                            <p class="text-gray-700">基于客户端IP分配服务器，确保同一客户端始终访问同一服务器。</p>
                            <div class="code-block mt-2">
                                <pre>upstream backend {
    ip_hash;
    server backend1.example.com;
    server backend2.example.com;
}</pre>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-shield-alt text-red-500 mr-3"></i> SSL/TLS配置
                    </h3>
                    
                    <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 mb-6">
                        <h4 class="text-xl font-medium mb-3 text-gray-800">基本SSL配置</h4>
                        <div class="code-block">
                            <pre>server {
    listen 443 ssl;
    server_name example.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    
    location / {
        proxy_pass http://backend;
    }
}</pre>
                        </div>
                        <p class="text-gray-700 mt-4">配置SSL证书、协议版本和加密套件，确保安全连接。</p>
                    </div>
                    
                    <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                        <h4 class="text-xl font-medium mb-3 text-gray-800">HTTP重定向到HTTPS</h4>
                        <div class="code-block">
                            <pre>server {
    listen 80;
    server_name example.com;
    return 301 https://$host$request_uri;
}</pre>
                        </div>
                        <p class="text-gray-700 mt-4">强制将所有HTTP请求重定向到HTTPS，增强安全性。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Static Resources Section -->
    <section id="static-resources" class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-gray-800">静态资源服务</h2>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div>
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-file-image text-blue-500 mr-3"></i> 静态资源优化
                    </h3>
                    <p class="text-gray-700 mb-6">静态资源服务是Web架构中的重要组成部分，专门用于处理静态内容的请求，如HTML、CSS、JavaScript、图像、字体和视频文件等。</p>
                    
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-compress-arrows-alt text-blue-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800 mb-1">文件压缩</h4>
                                <p class="text-gray-700">对HTML、CSS和JavaScript文件进行gzip或Brotli压缩，减少文件大小。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="bg-green-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-object-group text-green-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800 mb-1">资源合并</h4>
                                <p class="text-gray-700">将多个CSS或JavaScript文件合并为一个文件，减少HTTP请求数。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="bg-purple-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-image text-purple-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800 mb-1">图像优化</h4>
                                <p class="text-gray-700">使用适当的图像格式和压缩技术，减少图像文件大小。</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-semibold mb-4 text-gray-800 flex items-center">
                        <i class="fas fa-server text-green-500 mr-3"></i> Nginx静态资源配置
                    </h3>
                    
                    <div class="code-block">
                        <pre>server {
    listen 80;
    server_name example.com;
    
    location /static/ {
        root /var/www/html;
        expires 30d;
        add_header Cache-Control "public";
        
        # 启用gzip压缩
        gzip on;
        gzip_types text/plain text/css application/json application/javascript;
    }
    
    # 图片缓存优化
    location ~* \.(jpg|jpeg|png|gif|ico|svg)$ {
        expires 365d;
        add_header Cache-Control "public";
    }
}</pre>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800 flex items-center">
                    <i class="fas fa-globe-americas text-orange-500 mr-3"></i> 使用CDN加速
                </h3>
                
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <p class="text-gray-700 mb-6">内容分发网络（CDN）通过将静态资源分发到全球各地的节点，显著提高了资源的访问速度和可用性。</p>
                        
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <div class="bg-orange-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-bolt text-orange-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800 mb-1">性能提升</h4>
                                    <p class="text-gray-700">资源从离用户最近的节点加载，减少延迟。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-red-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-shield-alt text-red-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800 mb-1">安全防护</h4>
                                    <p class="text-gray-700">提供DDoS防护、Web应用防火墙等安全功能。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-purple-100 p-2 rounded-lg mr-4">
                                    <i class="fas fa-chart-line text-purple-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800 mb-1">带宽优化</h4>
                                    <p class="text-gray-700">减少源站带宽消耗，降低服务器负载。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <div class="code-block">
                            <pre>location /static/ {
    # 使用CDN时，只需修改资源URL
    rewrite ^/static/(.*)$ https://cdn.example.com/$1 permanent;
}

# 或者直接代理到CDN
location /assets/ {
    proxy_pass https://cdn.example.com/;
    proxy_set_header Host cdn.example.com;
}</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true
            }
        });
    </script>
</body>
</html>